<template>
	<view class="topnav">
		<uni-section title="自定义样式" type="line" class="top">
			<uni-search-bar placeholder="请输入要搜索的内容" bgColor="#EEEEEE" v-model="search" @blur="input" />
		</uni-section>
		<view class="main">
			<view class="left">
				<view v-for="(item,index) in kindlist" :key="index" class="item" :class="{item1:index1===index}">
					<text class="txt" :class="{active:index1===index}" @click="getKindPro(item,index)">
						{{item}}
					</text>
				</view>
			</view>
			<view class="right" <uni-section title="基础样式" type="line" padding style="width: 100%;">
				<uni-grid :column="4" :show-border="false">
					<uni-grid-item v-for="(item, index) in pro" :key="index">
						<view class="grid-item-box"
							style="background-color: #fff;display: flex;flex-direction: column;justify-content: center;align-items: center;"
							@click="details(item)">
							<uni-icons type="image" :size="30" color="#777" />
							<text class="text" style="height: 50rpx;">{{item.brand}}</text>
						</view>
					</uni-grid-item>
				</uni-grid>
				</uni-section>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getKindList,
		getpro1List,
		getSearch,
		getkindpro
	} from '../../api/api.js'
	export default {
		data() {
			return {
				title: "分类",
				search: '',
				kindlist: [],
				index1: 0,
				pro: [],
				proid: '',
				category: ''
			}
		},
		methods: {
			details(item) {
				this.category = item.brand
				getkindpro({brand: this.category,category: this.proid}).then(res => {
					let list = res.data.data 
					uni.navigateTo({
						url: `/pages/kinddetailslist/kinddetailslist?list=${encodeURIComponent(JSON.stringify(list))}`
					});
				})
			},
			list() {
				getKindList().then(res => {
					this.kindlist = res.data.data
				})
			},
			getKindPro(item, index) {
				this.proid = item
				this.index1 = index
				getpro1List({category: item}).then(res => {
					this.pro = res.data.data
				})
			},
			input() {
				getSearch({category: this.proid,brand: this.search}).then(res => {
					this.pro = res.data.data
				})
			}
		},
		mounted() {
			this.list()
			this.proid = '手机'
			this.getKindPro('手机', 0)
		}
	}
</script>

<style lang="scss">
	.topnav {
		width: 100vw;

		.top {
			width: 100vw;
			height: 10vh;
		}

		.main {
			width: 100vw;
			height: 90vh;
			margin-left: 20rpx;
			display: flex;

			.left {

				width: 25vw;
				height: 90vh;
				overflow: auto;
				background: #EEEEEE;

				.item {
					width: 25vw;
					height: 50rpx;
					// margin: 20rpx;
					color: black;
					display: flex;
					justify-content: center;
					align-items: center;

					.active {
						color: #e93b3d;
						background: #fff;
					}
				}

				.item1 {
					width: 25vw;
					height: 50rpx;
					// margin: 20rpx;
					background: #fff;

					.active {
						color: #e93b3d;
						background: #fff;
					}
				}

			}

			.right {
				width: 73vw;
				height: 100%;
				margin-top: 5vh;
			}
		}
	}
</style>